<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="image-container">
        <img data-src="https://via.placeholder.com/800x600?text=Image+1" alt="Image 1" class="lazy">
    </div>
    <div class="image-container">
        <img data-src="https://via.placeholder.com/800x600?text=Image+2" alt="Image 2" class="lazy">
    </div>
    <div class="image-container">
        <img data-src="https://via.placeholder.com/800x600?text=Image+3" alt="Image 3" class="lazy">
    </div>
</body>
<script>
    /**
     * DOMContentLoaded 是一个事件，它在初始的 HTML 文档被完全加载和解析完成之后触发，
     * 但不等待样式表、图片和子框架的完全加载。这个事件非常有用，因为它允许开发者在页面的 
     * HTML 内容准备好之后就可以执行 JavaScript，而不必等待所有资源的完全加载。
     * 
    */
   /**
    * Intersection Observer API 是一种现代浏览器提供的 API，用于检测目标元素在其祖先元素或视口（viewport）中可见性变化的情况。
    * 这在许多情况下都非常有用，例如实现懒加载图片、无限滚动内容、广告曝光监测等。
   */
    document.addEventListener('DOMContentLoaded', function () {
        const lazyImages = document.querySelectorAll('img.lazy')
        const observe = new IntersectionObserver((entries, observe) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const img = entry.target
                    img.src = img.getAttribute('data-src')
                    img.classList.remove('lazy')
                    observe.unobserve(img)
                }
            })
        })
        lazyImages.forEach(image => {
            observe.observe(image)
        })
    })
</script>
<style>
    .image-container {
      height: 800px;
      margin-bottom: 20px;
    }
    img {
      display: block;
      width: 100%;
      height: auto;
    }
</style>
</html>